<template>
  
  <div id="poster" class="home">
    <div class="logo">
      <a href="/#/"><img src="../assets/logo.png" alt=""></a>

    </div>

    <div class="wrapper">
      <div class="container">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" :hide-required-asterisk="true"
                 label-position="left" class="register-container" >
          <h3 class="register_title">
            用户登录
          </h3>
          <el-form-item label="用户名" prop="LoginName">
            <el-input type="text" v-model="ruleForm.LoginName" autocomplete="off" prefix-icon="el-icon-user-solid"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" prefix-icon="el-icon-lock"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="register-button" type="primary" @click="Login()">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>

          <div class="tips">
            <!-- <div class="sms" @click="register">手机短信登录/注册</div> -->

           <router-link class="reg" to="register">立即注册？</router-link>
          </div>
        </el-form>
      </div>

    </div>

    <div class="footer">
      <div class="footer-link">
        <router-link to="/">首页</router-link>
        <span>|</span>
        <router-link to="/goods">全部商品</router-link>
        <span>|</span>
        <router-link to="/about">个人中心</router-link>
      </div>
      <p class="copyright">Copyright ©2023 柒彩鞋城 All Rights Reserved.</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'

import {mapActions} from "vuex";

export default {
  name: 'LoginView',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        LoginName: ''
      },
      rules: {
        LoginName: [
          { required: true, message: "请输入你的名称", trigger: 'blur' },
          { min: 2, max: 9, message: "长度2到9个字符", trigger: 'blur' },
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ]
       

      }
    };
  },
//登录接口所在
  methods: {
    ...mapActions(["setUser"]),
    Login() {


      this.$axios
          .post("/user/login", {
            username: this.ruleForm.LoginName,
            password: this.ruleForm.pass
          })
          .then(res => {
            // “001”代表登录成功，其他的均为失败
            if (res.data.code === 20000) {
              // 隐藏登录组件
              //this.isLogin = false;
              // 登录信息存到本地
              let user = JSON.stringify(res.data.data.user);
              localStorage.setItem("user", user);
              localStorage.setItem("token", res.data.data.token);
              localStorage.setItem("trolleyAmount", res.data.data.trolleyAmount);
              // 登录信息存到vuex
              this.setUser(res.data.data.user);
              // 弹出通知框提示登录成功信息
              this.notifySucceed(res.data.message);
              if (this.$route.path==='/about'){
                location.reload();
              }
              this.$router.push('/')

            } else {
              // 清空输入框的校验状态
              this.$refs["ruleForm"].resetFields();
              // 弹出通知框提示登录失败信息
              this.notifyError(res.data.message);
            }
          })
          .catch(err => {
            return Promise.reject(err);
          });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  },


}
</script>
<style scoped>

.logo{
  height:143px;
  margin-left: 8%;


}
.logo img{
  width:auto;
  height:100%;

  float:left;
}
.logo h2{
  padding-left: 10%;
}
.wrapper{
  background:url('../assets/imgs/bk.png') no-repeat center;
}
.wrapper .container{
  height:576px;
}


#poster {

  background-attachment:fixed;
  background-position: center;
  
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  margin: 0px;
  padding: 0px;
}
.container{

}
.register-container {
  position: relative;
  top:100px;
  border-radius: 15px;
  background-clip: padding-box;
  margin:0px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.register_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #92691c;
}

.register-button {
  background: rgb(216, 189, 81);
  border: none;
}
.footer{
  /*background-color: #3d3d3d;*/
  height:100px;
  padding-top:40px;
  color:#999999;
  font-size:16px;
  text-align:center;
}

.footer-link a{
  color:#999999;
  display:inline-block;
}
.footer-link span{
  margin:0 10px;
}

.copyright{
  margin-top:13px;
}
.tips{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  cursor:pointer;

margin-left: 70%;
}
.tips .reg{

  color:#999999;

}
</style>